﻿<title>{$title}</title>
<js href="/jquery.min.js" />
<style>
#testfield{
	width:1000px;
	height:500px;
	background:#cccccc;
	border:1px solid #333333;
}
#tf_1{
	position:relative;
	left:0;
	top:0;
	background:#ff0000;
	width:20px;
	height:20px;
}
#tf_1_msg{
	position:relative;
	left:0;
	top:0;
	font-size:12px;
}

</style>

<script>
$(function() {
	$('#msg').html('dfsa');
	
	$('#testfield').mousemove(function(e) {
		var positionX=e.originalEvent.x-$(this).offset().left;//获取当前鼠标相对img的x坐标 
		var positionY=e.originalEvent.y-$(this).offset().top;//
	
		//$('#testfield').html(positionX + ', ' + positionY);
		
		$('#tf_1').css({top: positionY, left: positionX});
		$('#tf_1_msg').css({top: positionY-20, left: positionX+22});
	});
	
	$('#ipt').change(function() {
		$('#tf_1_msg').html($(this).val());
	});
});
</script>

  

<body>

<div id="msg"></div>
<input type="text" id="ipt" />
<div id="testfield">
	<div id="tf_1"></div>
	<div id="tf_1_msg"></div>
</div>

</body>